<style>
@import url(/src/assets/css/init.css);
.container {
  width: 1160px;
  margin: 0 auto;
}
.box {
  background: url(/src/assets/navbg.png) no-repeat 50%;
}
.nav {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.nav li {
  float: left;
  font-size: 16px;
  width: 120px;
}
.nav li a {
  color: #fff;
  width: 100%;
  height: 100%;
  display: block;
}
.router-link-active, .nav li:hover{
  background: #1842b2;
}
.header{
    width: 1160px;
    margin: 0 auto;
    height: 60px;
    line-height: 60px;
}
.header-logo img {
    position: relative;
    width: 345px;
    height: 40px;
    vertical-align: middle;
    top: -1px;
}
.header-menu {
    height: 100%;
}
.header-menu .line {
    position: relative;
    display: block;
    margin-left: 20px;
    width: 1px;
    height: 15px;
    background-color: #979797;
}
.header-menu>li {
    position: relative;
    height: 100%;
    padding-left: 25px;
    float: left;
    z-index: 99999;
}
.header-menu .search {
    position: relative;
    width: 300px;
    height: 35px;
    z-index: 5;
}
.middle-top {
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.header-menu .search .search-input {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    padding: 0 45px 0 20px;
    border: 1px solid #2577e3;
    box-sizing: border-box;
    border-radius: 5px;
}
.header-menu li a {
    color: #000;
    margin-right: 5px;
}
</style>
<template>
    <div>
        <div class="header">
            <div class="fl header-logo">
                <img src="/src/assets/logo_t.svg" alt="空中社区">
            </div>
            <ul class="header-menu fr">
                <li>
                    <div class="search fl middle-top">
                        <input type="text" placeholder="搜索目的地" class="search-input">
                    </div>
                    <span class="line middle-top fl"></span>
                </li>
                <li>
                    <a class="fl">下载APP</a>
<span class="line middle-top fl"></span>
                </li>
                <li><div><a>登录</a><a>注册</a></div></li>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="box">
        
            <ul class="nav container" > 
                <router-link to="/index" tag="li"><a>首页</a></router-link>
                <router-link to="/gwcx" tag="li"><a>公务出行</a></router-link>
                <router-link to="/gwfx" tag="li"><a>观光飞行</a></router-link>
                <router-link to="/tqhl" tag="li"><a>通勤航旅</a></router-link>
                <router-link to="/fxpx" tag="li"><a>飞行培训</a></router-link>
                <li>
                    <a href="http://aircommunity.net/airbb">空中论坛</a>
                </li>
            </ul>
        </div>
    </div>
   
</template>
<script>
export default {
  data() {
    return {
      index: 0
    };
  },
  methods: {
    changeActive(ind) {
      this.index = ind;
    }
  }
};
</script>
